import tpl from './index.tpl';
import './index.scss';

import { tplReplace } from '../../utils/tools'

import Cycle from './cycle/cycle'
import EmptyTime from './emptyTime/emptyTime'

import $ from 'jquery'

export default _ => {

    let ScreenAbled = null,
        daySign = {},
        CollectIndex = -1;

    return {
        name: 'calendar',

        tpl({ weekday, daysArr, showTitle, day, year, month }) {
            let list = '',
                cycle = Cycle(),
                emptyTime = EmptyTime();

            daySign = { year, month, day };

            list += tplReplace(tpl,{
                left: require('../../assets/left.png'),
                OneLeft: require("../../assets/OneLeft.png"),
                OneRight: require('../../assets/OneRight.png'),
                rightL: require('../../assets/right.png'),
                cycle: cycle.tpl(),
                showTitle,
                month: month,
                emptyTime: emptyTime.tpl( weekday, daySign ),
                MainTime: emptyTime.tpl( daysArr, daySign )
            });

            return list;
        },

        bindEvent({ typeClick }) {
            const el = document.getElementsByClassName('box')[0];
            ScreenAbled = typeClick;
            el.addEventListener('click', this.handleCurrent.bind(this) );
            this.OpenCalendar();
        },

        handleCurrent( event ) {
            let el = event.target,
                name = el.getAttribute('name');
            
            if ( name === 'seat' ) {
                this.selectTime( el );
            } else if ( name === 'MonthImg' ) {
                ScreenAbled( 'changeMonthHandler', { day: el.id }, res => {
                    $('.main').empty();
                    this.MainRender( res )
                })
            } else if ( name === 'YearImg' ) {
                ScreenAbled( 'changYearHandler', { day: el.id }, res => {
                    $('.main').empty();
                    this.MainRender( res )
                })
            } else if ( name === 'btn' ) {
                ScreenAbled( 'submit', { day: el.id } )
            } 
        },

        // 添加选中高亮
        selectTime( el ) {
            let day = $(el).attr('index');
            
            ScreenAbled( 'section', { day }, ( res, { mode }) => {
                if ( res ) return;
                
                if ( mode === 'date' ) {
                    $(el)
                        .addClass('active')
                        .siblings('.active')
                        .removeClass('active');
                        ScreenAbled('alone', { day: day });
                } else {
                    ScreenAbled( 'ChangeDouble', { day }, type => {
                        if ( type === 'start' ) {

                            $('.seat').find('.slot').text(' ');
                            $(el).find('.slot').text('起始');
                            $(el)
                                .addClass('active')
                                .siblings('.active')
                                .removeClass('active')

                            $(el)
                                .siblings('.section')
                                .removeClass('section')
                            // 存储开始的下标
                            CollectIndex = day;
                            return false;
                        }

                        $(el)
                            .addClass('active')
                            .siblings('.sign')
                            .slice( CollectIndex, day - 1 )
                            .addClass('section')

                        $(el).find('.slot').text('结束');
                    });
                }
                

            })

        },

        MainRender({ weekday, daysArr, showTitle, year, month, day  }) {
            let emptyTime = EmptyTime(),
                emptylist = emptyTime.tpl( weekday, { year, month, day } ),
                mainlist = emptyTime.tpl( daysArr, { year, month, day } );

            $('.main').append( emptylist.concat(mainlist) );
            $('.title').text(showTitle);
            $('.tips').text( month );
        },

        OpenCalendar() {
            // 打开日历
            $('.open').click( _ => {
                $('.box').css('transform','translateY(0px)')
            });

            // 关闭日历
            $('.close').click( _ => {
                this.CloseCalendar();
            })
        },

        CloseCalendar() {
            $('.box').css('transform','translateY(600px)')
        }

    }

}